---
id: 5dc23991f86c76b9248c6eb8
title: Passo 6
challengeType: 0
dashedName: step-6
---

# --description--

No passo anterior, você colocou os elementos `h1` e `h2`, o comentário e os elementos `p` dentro do elemento `main`. Isso é chamado de *aninhamento*. Elementos aninhados devem ser colocados dois espaços mais à direita do elemento em qual estão aninhados. Este espaçamento é chamado de indentação e é usado para facilitar a leitura do HTML.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

Os elementos `h1` e `h2`, assim como o comentário, estão indentados dois espaços adiante do elemento `main` no código abaixo. Use a barra de espaço no seu teclado para adicionar mais dois espaços na frente do elemento `p` para que ele também seja indentado corretamente.

# --hints--

O código deve ter um elemento `h2` com o texto `Cat Photos`. Você pode ter excluído acidentalmente esse elemento, está faltando as tags de abertura e fechamento dele ou o texto foi alterado.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

Você não deve adicionar os elementos `ul` ou `li` do exemplo.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

Você não deve alterar o recuo na linha com o elemento `h2`. A tag de abertura deve começar 6 espaços após o início da linha. Você pode reiniciar o passo para restaurar o recuo original.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

O código deve ter um comentário. Você excluiu o comentário de um passo anterior.

```js
assert(code.match(/<!--.*-->/));
```

O texto do comentário deve ser `TODO: Add link to cat photos`. Não altere o texto nem o espaçamento do comentário.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

Você não deve alterar o recuo na linha que tem o elemento de comentário. A tag de abertura deve começar 6 espaços após o início da linha. Você pode reiniciar o passo para restaurar o recuo original.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

O código deve ter um elemento `p`. Você removeu o elemento `p` de um passo anterior.

```js
assert(document.querySelector('p'));
```

O texto do elemento `p` deve ser `See more cat photos in our gallery.` Não altere o texto, o espaçamento ou a pontuação do elemento `p`.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

A tag de abertura `p` deve ter recuo que corresponde ao seu `h2` e aos elementos de comentários. A tag de abertura deve começar 6 espaços após o início da linha.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

